<template>
  <div class="imgDetail">
    <myheader></myheader>
    <div class="nav">
      <div class="back" @click="$router.go(-1)">
        <van-icon name="arrow-left" /><span>返回</span>
      </div>
      <div class="detail">
        <span>图片详情</span>
      </div>
      <div></div>
    </div>
    <!-- 图片详情 -->
    <div class="introduce" v-for="value in imagesInfo" :key="value.id">
      <!-- title -->
      <div class="title">
        <h2>{{ value.title }}</h2>
        <span>{{ value.add_time }}</span>
        <span>{{ value.click }}次浏览</span>
        <!-- <span v-for='item in title' :key='item.id'>{{item.id==id ? 'item.title':''}}</span>
         -->
         <span>经济民生</span>
      </div>
      <!-- 图片 -->
      <div class="imges">
        <div v-for="value in images" :key="value.id">
          <img :src="value.src" alt="" />
        </div>
      </div>
      <!-- 简介 -->
      <div class="intro">
        <p v-html="value.content"></p>
      </div>
    </div>

    <!-- 评论 -->
    <comment></comment>
  </div>
</template>

<script>
import myheader from "@/components/myheader";
import { getthumimages, getimageInfo,getImgCateGory } from "@/apis/imgcategory";
import comment from "@/components/comment";
export default {
  props: ["id"],
  components: {
    myheader,
    comment,
  },
  data() {
    return {
      images: [],
      imagesInfo: [],
      title: "",
    };
  },
  mounted() {
    // 获取id
    // console.log(this.$route.params.id);
    getthumimages(this.id).then((res) => {
      // console.log(res);
      this.images = res.data.message;
    });
    getimageInfo(this.$route.params.id).then((res) => {
      console.log(res);
      this.imagesInfo = res.data.message;
    });
    // getImgCateGory(this.id)
    // .then(res=>{
     
    //   this.title=res.data.message
    //   console.log(this.title);
 
    //   })
 
  },
};
</script>

<style lang="less" scoped>
.imgDetail {
  padding-bottom: 50px;
  .nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 2.5rem;
    font-size: 1.083333rem;
    background-color: #f7f7f7;
    color: #26a2ff;
    padding: 0 20px;
  }
  .introduce {
    // height:5.416667rem;
    padding: 15px 5px;

    .title {
      padding-bottom: 15px;
      border-bottom: 1px solid #ccc;
      margin-bottom: 10px;
      h2 {
        color: #26a2ff;
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 15px;
      }
      span {
        color: rgb(136, 125, 125);
        padding: 0 5px;
      }
    }
    .imges {
      display: flex;
      flex-wrap: wrap;
      margin: 15px 0;
      img {
        margin: 5px 5px;
        height: 7.5rem;
      }
    }
  }
}
</style>